<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>login</title>
    <script src="./js/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/bootstrap.min.js"></script>


  </head>
  <body>

  <!--register modal-->
  <div class="modal fade registermodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">注册新账号</h4>
        </div>
        <form id="register_form" method="post">
          <div class="modal-body">
            <div class="form-group">
              <label for="regisUsername">账号</label>
              <input type="text" name="regi_username" class="form-control" id="regisUsername">
              <span class="help-block"></span>
            </div>
            <div class="form-group">
              <label for="regisPassword">密码</label>
              <input type="password" name="regis_password" class="form-control" id="regisPassword">
              <span class="help-block"></span>
            </div>
            <div class="form-group">
              <label for="conformPwd">再次输入密码</label>
              <input type="password" name="conform_pwd" class="form-control" id="conformPwd">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="regis_pic"
                   name="pic" placeholder="验证码" required>
            <span class="help-block"></span>
            验证码：<img src="captcha" id="regis_code" width="120" height="40">
          </div>
          <span class="help-block"></span>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="btn_modal_register">注册</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!--end of registermodal-->



    <div class="container vertical-center">
	<div class="col-md-6 col-md-offset-3">
      <form  action="loginvalidate" method="post">
        <h2>Please Login</h2>
        <div class="form-group">
          <div class="col-sm-10">
            <input type="text" class="form-control" id="username"
                   name="username" placeholder="账号" required> <span
                  class="help-block"></span>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-10">
            <input type="password" class="form-control" id="password"
                   name="password" placeholder="密码" required> <span
                  class="help-block"></span>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-10">
            <input type="text" class="form-control" id="pic"
                   name="pic" placeholder="验证码" required>
            <span class="help-block"></span>
            验证码：<img src="captcha" id="code" width="120" height="40">
          </div>
          <div class="col-sm-10">
            <a id="btn_register">没有账号？客官快来注册！</a>
            <button id="sub" class="btn btn-lg btn-primary btn-block" type="button">login</button>
          </div>
        </div>

      </form>
        	
	</div>
    </div> <!-- /container -->
  </body>
</html>
<script>

$(document).ready(function(){
   // 更换验证码
   $('#code').click(function() 
   {
       $('#code').attr("src", "captcha?timestamp=" + (new Date()).valueOf());
   });
  $('#regis_code').click(function()
  {
    $('#regis_code').attr("src", "captcha?timestamp=" + (new Date()).valueOf());
  });


  //打开注册的模态框
  $("#btn_register").click(function () {
    $(".registermodal").modal("show");
    clear("#regisUsername");
    clear("#regisPassword");
    clear("#conformPwd");
    $("#regis_pic").val("");
  });






  /*star===========注册表单的提交按钮*/
  $("#btn_modal_register").click(function () {
    var json = {"regisUsername":$("#regisUsername").val(),
                "regisPassword":$("#regisPassword").val(),
                "conformPwd":$("#conformPwd").val(),
                "regis_pic":$("#regis_pic").val()};
    var flag = parseInt(flag1) +parseInt(flag2) +parseInt(flag3);

    if(flag==0){//当flag等于0的时候说明前几个校验都成功了！
      $.ajax({
        url:"register",
        type:"POST",
        data:JSON.stringify(json),
        dataType: 'json',
        contentType:'application/json;charset=UTF-8', //contentType很重要  苦笑   确实很重要
        success: function (a) {
          /*
          * a.state 100：说明后端校验不通过  200：说明后端校验成功
          * a.level不通过的字段   a.obj用来携带出错的信息
          * */
          if(a.state=="100"){
            if(a.level==null){
            $("#regis_pic").parent().addClass("has-error");
            $("#regis_pic").next("span").text(a.obj);
            }if (a.level=="username"){
              $("#regisUsername").parent().addClass("has-error");
              $("#regisUsername").next("span").text(a.obj);
            }if(a.level=="password"){
              $("#regisPassword").parent().addClass("has-error");
              $("#regisPassword").next("span").text(a.obj);
            }
          }
          if(a.state=="200"){//a.state 200表示注册成功  这是a.state 会携带新注册的用户名
            $(".registermodal").modal("hide");
            alert("注册成功！快去登录吧！");
            $("#username").val(a.obj);
          }

        }
      });
    }//end of if
   });/*end =========注册表单提交*/



/*登录按钮点击事件*/
   $("#sub").click(function(){
     var json = {"username":$("#username").val(),
       "password":$("#password").val(),
       "pic":$("#pic").val()}

     /*每次点击提交按钮都要初始化表单的样式因为会清空数据所以要先后去数据后再清空*/
          clear("#username");
          clear("#password");
          clear("#pic");

     $.ajax({
       url:"loginvalidate",
       type:"POST",
       data:JSON.stringify(json),
       dataType: 'json',
       contentType:'application/json;charset=UTF-8', //contentType很重要  苦笑   确实很重要
       success:function(a){
         if(a.state=='success')
           window.location="showfilms";
         if(a.state=='error code'){
           $("#pic").parent().addClass("has-error");
           $("#pic").next("span").text("验证码错误！");
         }if(a.state=='username is null'){
           $("#username").parent().addClass("has-error");
           $("#username").next("span").text("验证码错误！");
         }if(a.state=='error password'){
           $("#password").parent().addClass("has-error");
           $("#password").next("span").text("密码错误！");
         }
       }
     });

   });

  function clear(element) {
    // 每次显示前要清空
    $(element).parent().removeClass("has-success");
    $(element).parent().removeClass("has-error");
    $(element).next("span").empty();
    $(element).val("");/*清空数据*/

  }



  //前端校验
  var flag1 ;
  var flag2 ;
  var flag3 ;

  $("#regisUsername").blur(function () {
    return checkUser();
  });


  $("#regisPassword").blur(function () {
    return checkPwd();
  });


  $("#conformPwd").blur(function () {
    return checkRepwd();
  });//end of 前端校验


  //验证用户名
  function checkUser(){

    var user=$("#regisUsername").val().trim();
    var reguser=/^[a-zA-Z0-9](\w|.|-){2,16}[a-zA-Z0-9]$/;
    if(reguser.test(user)==false){
      $("#regisUsername").parent().addClass("has-error").removeClass("has-success");
      $("#regisUsername").next("span").text("只能以数字、字母开头或结尾，组长度为4-18");
      flag1=1;
    }else{
      $.ajax(
              {
                url:"checkUser",
                type:"POST",
                data:{"username":$("#regisUsername").val()},
                success:function (a) {
                  if (a.state=="200"){
                    $("#regisUsername").parent().addClass("has-success").removeClass("has-error");
                    $("#regisUsername").next("span").text("用户名可用！");
                    flag1 = 0;
                  }if (a.state=="100"){
                    $("#regisUsername").parent().addClass("has-error").removeClass("has-success");
                    $("#regisUsername").next("span").text(a.obj);
                    flag1 =  1;
                  }
                }
              }

      );
      return 1;
    }
  }
//验证密码
  function checkPwd(){
    var pwd=$("#regisPassword").val().trim();
    var regpwd=/^[0-9a-zA-Z]{4,18}$/;
    if(regpwd.test(pwd)==false){
      $("#regisPassword").parent().addClass("has-error").removeClass("has-success");
      $("#regisPassword").next("span").text("密码由英文字母和数字组成的4-18位字符");
      return flag2 = 1;
    }else{
      $("#regisPassword").parent().addClass("has-success").removeClass("has-error");
      $("#regisPassword").next("span").text(" ");
      return flag2 = 0;
    }
  }
//确认密码
  function checkRepwd(){
    var pwd=$("#regisPassword").val().trim();
    var repwd=$("#conformPwd").val().trim();
    if(pwd==""){
      $("#conformPwd").next("span").text("您的密码为空！");
      return flag3 = 1;
    }
    if(repwd!=pwd){
      $("#conformPwd").parent().addClass("has-error").removeClass("has-success");
      $("#conformPwd").next("span").text("两次输入密码不一致！");
      return flag3 = 1;
    }else{
      $("#conformPwd").parent().addClass("has-success").removeClass("has-error");
      $("#conformPwd").next("span").text("");
      return flag3 = 0;
    }
  }

   
});
  </script>